<template>
	<view class="">
		<!-- tabs -->
		<tabs @tabClick="tabClick"></tabs>
		<!-- 趋势 -->
		<view class="tendency" v-show="tabActive==0">
			<!-- 滑动 tabs -->
			<view class="scroll-tab">
				<msTabs :list="scrollList" v-model="scrollActive"></msTabs>
			</view>
			<view v-show="hasData" class="content m16">
				<!-- 图表 -->
				<uchartTools :chartParams="chartParams" :showTools="showTools" ref="payUchart"></uchartTools>
				<!-- 表格 -->
				<pTable
					:caption="tableParams.caption"
					:heads="tableParams.heads"
					:bodys="tableParams.bodys">
				</pTable>
			</view>
			<view v-show="!hasData" class="no-data">
				暂无数据
			</view>
		</view>
		<!-- 明细 -->
		<view class="details m16" v-show="tabActive==1">
			<view class="bgw br6 mb16" v-for="(item, index) in orderDetailArr" :key="index">
				<view class="mlr20">
					<list
						label="缴费方式"
						lableColor="blue"
						:iconName="item.orderMode|formateOrderModeIcon"
						:iconColor="item.orderMode==0?'green':'blue'"
						class="bb ptb8"
						:value="item.orderMode">
					</list>
					<list label="缴费金额" :value="item.orderMoney+'元'" color="red"></list>
					<list label="缴费日期" :value="item.orderTime | formateByTime"></list>
				</view>
			</view>
			<!-- 加载loading -->
			<view class="weui-loadmore" :hidden="isHideLoadMore">
			    <view class="weui-loading"></view>
			    <view class="weui-loadmore__tips">正在加载</view>
			</view>
			<!-- 没有数据 -->
			<view class="no-data" v-if="noData" :hidden="!isHideLoadMore">
				没有更多数据
			</view>
		</view>
	</view>
</template>

<script>
import list from '../../components/List.vue';
import msTabs from '../../components/ms-tabs/ms-tabs.vue';
import tabs from '../../components/tabs/tabs.vue';
import uchartTools from '../../components/u-charts/u-chart-tools.vue';
import pTable from '../../components/p-table/table/table.vue';
let util = require('../../utils/utils.js');
let api = require('../../utils/api.js');
export default {
	data() {
		return {
			user: {},
			options:{},
			scrollList: [], // 滚动 tab list
			tabActive: 0, // 顶部 tab 下标
			scrollActive: 0, // 滚动 tab 下标
			chartParams: {
				chartType: 'line',
				opts: {
					categories:[],
					series:[{
							name: '',
							data: [],
							color: '#8A8B97'
						}],
					yAxis: {
						splitNumber: 5
					}
				},
				title: '缴费历史统计',
				unit: '元'
			},
			showTools: false, // 不显示日期选择器
			tableParams: { // 明细表格
				caption: '每月缴费明细',
				heads: ['月份', '金额(元)'],
				bodys: []
			},
			curPageNo: 1 , // 缴费明细 page
			orderDetailArr: [], // 缴费明细
			noData: false, // 没有数据
			isHideLoadMore: true, // 是否隐藏加载更多
			hasData: true, // 是否有数据
			monthArr: [] // 月份
		};
	},
	components: {
		list,
		msTabs,
		uchartTools,
		tabs,
		pTable
	},
	onLoad(options) {
		this.options = options;
		this.getThreeYears();
		this.getMonthArr();
		this.getChartData(this.scrollList[this.scrollActive].title);
	},
	onReady() {
	},
	filters: {
		formateByTime: function(val) { // 时间格式化
			return util.formateByTime(val);
		},
	
		formateOrderModeIcon: function(val) { // 支付方式图标
			switch(val) { 
				case '微信支付':
					return 'iconfont-wechat';
				case '支付宝支付':
					return 'iconfont-alipay';
				case '银行代收':
					return 'iconfont-bank';
				case '营业厅现金':
					return 'iconfont-hallcash';
				default:
					return 'iconfont-pay-circle';
			}
		}
	},
	watch: {
		tabActive(val) {
			if(val == 1) { // 监听顶部 tab
				this.orderDetailArr = [];
				this.getPayDetails();
			}
		},
		scrollActive(val) { // 监听滚动 tab
			this.getMonthArr();
			this.getChartData(this.scrollList[val].title)
		}
	},
	methods: {
		// 最近三年
		getThreeYears() {
			let year = Number(util.getNowTime().slice(0,4));
			for(let i = 0; i < 3; i++) {
				this.scrollList.push({title: year})
				year--;
			}
		},
		// 判断月份是否存在
		isHasMonth(listArr,month){
			return listArr.filter((item)=>{
				return month == item.orderMonth.slice(4,6);
			})
		},
		// 计算月份长度
		getMonthArr(){
			this.monthArr = [];
			let nowYear = new Date().getFullYear();
			if(nowYear == this.scrollList[this.scrollActive].title) { // 截止当前月
				let nowMonth = new Date().getMonth() + 1;
				while(nowMonth > 0) {
					this.monthArr.unshift(nowMonth)
					nowMonth--;
				}
			} else { // 12 个月
				for(let i = 1; i < 13; i++) {
					this.monthArr.push(i)
				}
			}
		},
		/**获取图表数据
		 * @param {String} year 当前年
		 */
		async getChartData(year) { 
			let data = await api.getOrderDataByYear(this.options,year);
			let listArr = data.data.listArray;
			
			// 清空旧数据
			this.chartParams.opts.categories = [];
			this.chartParams.opts.series[0].data = [];
			this.tableParams.bodys = [];
			if(listArr.length) {
				let newArray = [];
				this.hasData = true; // 显示图表
				
				this.monthArr.forEach((v, i) => {
					let itemArr = this.isHasMonth(listArr,v);
					if(itemArr.length) {
						newArray.push(itemArr[0]);
					}else{
						newArray.push({
							orderMonth:v<10?`${String(year)}0${v}`:`${String(year)+v}`,
							orderMoney:'0'
						})
					}
				})
				newArray.forEach((item, index) => {
					// 设置图表数据
					this.chartParams.opts.categories.push(item.orderMonth.slice(4,6));
					this.chartParams.opts.series[0].data.push(item.orderMoney);
					// 设置表格数据
					this.tableParams.bodys.push([item.orderMonth.slice(4,6), item.orderMoney===''?'0':item.orderMoney]);
				})
				console.log('返回数据',listArr)
				this.$refs.payUchart.$refs.uchartTools.updateData(this.chartParams);
			} else {
				this.hasData = false; // 隐藏图表
			}
		},
		/**
		 * 获取缴费明细
		 */
		async getPayDetails() {
			if(this.noData) return;
			this.isHideLoadMore = false; // 显示loading
			let data = await api.getOrderData(this.options,this.curPageNo);
			this.isHideLoadMore = true; // 隐藏loading
			this.orderDetailArr = this.orderDetailArr.concat(data.listArray);
			if(this.curPageNo == data.totalPages) {
				this.noData = true; // 无数据提示
			} else {
				this.curPageNo++;
			}
			
		},
		// 顶部 tab 点击事件
		tabClick(i) {
			this.tabActive = i;
		},
	},
	// 页面触底加载更多
	onReachBottom() {
		if(this.tabActive == 1) {
			this.getPayDetails()
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $uni-bg-color-grey;
}
</style>